<style>
    .wifi-info {
        color: white;
        padding-left: 20px;
    }

    .table-container {
        background-color: transparent;
        color: white;
        width: 100%;
        /* height: 270px; */
        padding: 30px 0px 20px 0px;
        text-align: left;
        table-layout: fixed;
        border: none;
    }

    .table-container td {
        /* padding-left: 15px; */
        /* padding-right: 15px; */
    }

    .table-container .name {
        padding-left: 15px;
    }

    .table-container .value {
        width: 140px;
    }

    .wifi-info span {
        min-width: 50px;
    }

    #soft-keyboard {
        /* background-color: rgba(0, 0, 0, 0.1); */
        /* height: 160px; */

        padding: 0px 3px 0 3px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        /* justify-content: space-between; */
        justify-content: flex-start;
        align-items: flex-start;
    }

    .skb-key {
        border-radius: 5px;
        min-width: 18px;
        padding: 0 2px;
        margin: 2px;
        background-color: #FFF;
        text-align: center;
    }

    .skb-key.active {
        background-color: rosybrown;
    }

    #input {
        width: 240px;
        background-color: #CCC;
        position: fixed;
        top: 100px;
        color: black;
    }

    #input .title {
        text-align: center;
        width: 240px;
    }

    #passwd {
        width: 200px;
        margin: 5px 18px;
    }

    .hide {
        display: none;
    }
</style>

<!-- <div class="wifi-info">
    <table>
        <tr>
            <td>wlan0:</td>
            <td>{{info.ssid || '未连接' | translate}}</td>
        </tr>
        <tr>
            <td>{{'IP地址' | translate}}:</td>
            <td>{{info.ip_address}}</td>
        </tr>
    </table>
</div> -->
<!-- <div class="mdl-spinner mdl-js-spinner is-active"></div> -->
<table class="table-container" rules="none">
    <tbody>
        <tr ng-class="{ active: itemIndex == 0}">
            <td class="name">IP地址</td>
            <td class="value">{{eth0.ip}}</td">
        </tr>
        <tr ng-class="{ active: itemIndex == 1}">
            <td class="name">子网掩码</td>
            <td class="value">{{eth0.netmask}}</td">
        </tr>
        <tr ng-class="{ active: itemIndex == 2}">
            <td class="name">网段</td>
            <td class="value">{{eth0.cidr}}</td">
        </tr>
        <tr ng-class="{ active: itemIndex == 3}">
            <td class="name">网关</td>
            <td class="value">{{eth0.gw}}</td">
        </tr>
    </tbody>
</table>
 
<div id="input" class="hide">
    <div class="title"></div>
    <input id="passwd" class="input" placeholder="{{'等待输入' | translate}}" />
    <div id="soft-keyboard" for="passwd" ok_text="确定"></div>
</div>